<template>
  <div>
    <div class="tabNave">
      <div class="tabBox flex-h">
        <span :class="['flex1', tabIndex === 1 ? 'active' : '']" @click="tabs(1)">快讯</span>
        <span :class="['flex1', tabIndex === 2 ? 'active' : '']" @click="tabs(2)">直播</span>
        <span :class="['flex1', tabIndex === 3 ? 'active' : '']" @click="tabs(3)">咨询</span>
        <span :class="['flex1', tabIndex === 4 ? 'active' : '']" @click="tabs(4)">专题</span>
      </div>
    </div>
    <div v-show="tabIndex === 1">
      <div class="kuaixunBox">
        <div class="flex-h kuaixun" v-for="(i, index) in infoList" :key="index" @click="goInfo(i)">
          <i></i>
          <b>{{ i.title }}</b>
        </div>
        <div class="more" @click="goMore('../recruitStudents/news')"><b>查看更多</b><img src="~@/static/images/com_icon_arrow_right_gray_32.png" alt="" /></div>
      </div>
    </div>
    <div v-show="tabIndex === 2">
      <live-card :lives="liveList"></live-card>
      <div class="more" @click="goMore('../recruitStudents/lives')"><b>查看更多</b><img src="~@/static/images/com_icon_arrow_right_gray_32.png" alt="" /></div>
    </div>
    <div v-show="tabIndex === 3">
      <seek-info :advisories="advisoriesList"></seek-info>
      <div class="more" @click="goMore('../recruitStudents/consultation')"><b>查看更多</b><img src="~@/static/images/com_icon_arrow_right_gray_32.png" alt="" /></div>
    </div>
    <div v-show="tabIndex === 4">
      <div style="padding: 0 0.3rem; box-sizing: boder-box;">
        <div class="subtitle flex-h" style="padding: 0;" @click="commonJs.gopush('../recruitStudents/subjectDetail')">
          <span class="flex1" style="font-size: 0.4rem;">精选专题</span>
          <div class="flex1" style="text-align: right;">
            <i class="imgIcon"></i>
          </div>
        </div>
        <courseItem @openBuyVip="opens" :videoLists="topicList"></courseItem>
        <div class="subtitle flex-h" style="padding: 0;" @click="commonJs.gopush('../recruitStudents/subjectDetail', 'text')">
          <span class="flex1" style="font-size: 0.4rem;">图文专题</span>
          <div class="flex1" style="text-align: right;">
            <i class="imgIcon"></i>
          </div>
        </div>
        <courseItem @openBuyVip="opens" :videoLists="imgTextTopic"></courseItem>
        <div class="subtitle flex-h" style="padding: 0;" @click="commonJs.gopush('../recruitStudents/subjectDetail', 'video')">
          <span class="flex1" style="font-size: 0.4rem;">视频专题</span>
          <div class="flex1" style="text-align: right;">
            <i class="imgIcon"></i>
          </div>
        </div>
        <courseItem @openBuyVip="opens" :videoLists="videoTopic"></courseItem>
      </div>
    </div>
  </div>
</template>

<script>
// import infoList from '~/components/infoList'
import liveCard from '~/components/liveCard'
import seekInfo from '~/components/seekInfo'
import courseItem from '../pages/curriculum/components/courseItem'
import BuyVip from '~/components/BuyVip'
export default {
  components: { liveCard, seekInfo, courseItem, BuyVip },
  props: {
    infoList: Array,
    liveList: Array,
    advisoriesList: Array,
    topicList: Array,
    imgTextTopic: Array,
    videoTopic: Array,
  },

  data() {
    return {
      tabIndex: 1,
      showBuyVipModle: true,
      serverName: '',
    }
  },
  watch: {},

  mounted: function() {},
  methods: {
    opens() {
      this.$emit('openVip')
    },
    tabs(i) {
      this.tabIndex = i
      this.$emit('getToIndex', i)
    },
    goInfo(item) {
      this.commonJs.gopush('../info/infoDetail', item.id)
    },
    goMore(uri) {
      this.$router.push({ path: uri + '?provincesId=' + sessionStorage.getItem('provincesId') })
    },
  },
}
</script>

<style scoped lang="less">
.tabNave {
  width: 100%;
  height: 50px;
  padding: 0 0.3rem;
  box-sizing: border-box;
  span {
    text-align: center;
    height: 0.5rem;
    line-height: 0.5rem;
    font-size: 0.34rem;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    border-right: 0.01rem solid rgba(229, 232, 237, 1);
    overflow: inherit;
  }
  span:nth-of-type(4) {
    border-right: none;
  }
  .active {
    font-weight: 600;
    color: rgba(34, 34, 34, 1);
    position: relative;
  }
  .active::after {
    content: '';
    position: absolute;
    width: 0.4rem;
    height: 0.08rem;
    background: rgba(255, 173, 13, 1);
    border-radius: 0.04rem;
    left: 50%;
    margin-left: -0.2rem;
    bottom: -0.2rem;
  }
}
.kuaixunBox {
  width: 100%;
  height: auto;
  padding: 0 30rpx;
  .kuaixun {
    margin-bottom: 0.5rem;
    i {
      display: inline-block;
      width: 0.1rem;
      height: 0.1rem;
      background: rgba(255, 214, 61, 1);
    }
    b {
      font-size: 0.3rem;
      font-weight: 500;
      color: rgba(34, 34, 34, 1);
      line-height: 0.4rem;
      padding-left: 0.3rem;
      box-sizing: border-box;
      width: 6.4rem;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
    }
  }
}
.more {
  width: 6.9rem;
  height: 0.8rem;
  background: rgba(247, 247, 250, 1);
  border-radius: 0.1rem;
  text-align: center;
  line-height: 0.8rem;
  margin: 0 auto 0.6rem;
  b {
    font-size: 0.24rem;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    vertical-align: middle;
  }
  img {
    display: inline-block;
    width: 0.32rem;
    height: 0.32rem;
    vertical-align: middle;
  }
}
.subtitle {
  padding: 0 0.3rem;
  box-sizing: border-box;
  height: 0.8rem;
  margin: 0.2rem auto;
  span {
    font-size: 0.4rem;
    font-family: PingFangSC;
    font-weight: 600;
    color: rgba(34, 34, 34, 1);
    line-height: 0.8rem;
  }
  .imgIcon {
    width: 0.6rem;
    height: 0.6rem;
    display: inline-block;
    background: url('~@/static/sprite/icon_sprites_40.png') -1.95rem -1.05rem;
    background-size: 4.5rem 3.6rem;
  }
}
</style>
